<template>
	<view class="warp">
		<view class="banner">
			<view class="uni-margin-wrap">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item>
								<view class="swiper-item uni-bg-red" style="background-color: red;">
									<!-- <image style="width: 100%;" :src="activityinfo.activityExtra1" mode=""></image> -->
								<video  style="width: 100%;height: 300rpx;" :src="videourl"></video>
								</view>
							</swiper-item>
						</swiper>
			</view>
			 
		</view>
		<view class="time">
			<view class="top">
				<span>投票倒计时：</span>
				<uni-countdown :show-colon="false" color="#ee212d"   :day="cutdown.day" :hour="cutdown.hour" :minute="cutdown.min" :second="cutdown.scord"></uni-countdown>
			</view>
			<view class="bottom">
				<span>投票须知：</span>
				<span>投票须知:每个账号每日可投1票</span>
			</view>
			<view class="votenum">
				<view class="content">
					<uni-icons color="#fff" type="eye" size="20"></uni-icons>
			           <view class="num">
			           	<span>浏览量:</span>
						<span>{{looknum.viewsZzNum}}</span>
			           </view>
				</view>
			</view>
		</view>
		<view class="tab_list" >
			<view @click="changetab(1)" :class="tanshow==1?'t_item active':'t_item'"  style="border-right: 2rpx solid #cecece;">
				人气排名
			</view>
			<view @click="changetab(2)" :class="tanshow==2?'t_item active':'t_item'" >
				最新参与
			</view>
		</view>
		<view class="list_value">
			<view class="item_value" v-for="(item,index) in list" :key="index">
				<view @click="towebinfo(item)" class="left_image" style="margin-right: 20rpx;">
					<image style="width: 250rpx;margin-right: 20rpx;height: 260rpx;" :src="item.votePicture" mode="widthFix"></image>
				</view>
				<view class="right_text">
				<view class="r_top">
					<span>嘉宾</span>
					<span>:</span>
					<span>{{item.participant}}</span>
				</view>
				<view class="r_tops">
					<span>职务</span>
					<span>:</span>
					<span >{{item.participantWork}}</span>
				</view>
				<view class="r_center">
					<span style="font-size: 26rpx; font-weight: 550;">主题</span>
					<span>：</span>
					<span style="font-size: 24rpx;">{{item.voteContent}}</span>
				</view>
				<view class="bottom">
					<view class="b_num">
					<span style="color: #ff841f;font-weight: 550;">{{item.voteCount}}</span>
						票
					</view>
					<view v-if="isover>0" class="b_button" @click="votestart(item)">
						投票
					</view>
					<view v-else class="b_buttons" @click="votestarted(item)">
						投票
					</view>
				</view>
				
				</view>
				<view v-if="item.createId==userCenterData.memberId" class="delete" @click="delteitem(item)">
				  删除
				</view>
			</view>
		</view>
		<!-- 新增投票人按钮 -->
		<view v-if="activityinfo.createId==userCenterData.memberId" class="addbutton" @click="open">
		<uni-icons type="plusempty" color="#fff" size="50"></uni-icons>
		</view>
		<uni-popup ref="popup" type="center"   background-color="#fff">
			<view class="form">
			<view class="" style="display: flex;align-items: center;padding: 10rpx 0;">
			 <span style="margin-right: 15rpx;">姓名:</span>
				<input v-model="form.participant" type="text" placeholder="请输入员工姓名"></input>
			</view>
			<view class="" style="display: flex;align-items: center;padding: 10rpx 0;">
			 <span style="margin-right: 15rpx;">职务:</span>
				<input v-model="form.participantWork" type="text" placeholder="请填写职务"></input>
			</view>
			<view class="" style="">
			 <span style="margin-right: 15rpx;">内容:</span>
			 <textarea placeholder="请输入内容" style="background-color: #efefef;width: 100%;border-radius: 10rpx;" v-model="form.voteContent"  name="" id="" cols="30" rows="10"></textarea>
			</view>
			<view class="image">
				<view v-if="!form.votePicture" class="addimages"@click="uploadCover">
							<uni-icons type="camera" size="30"></uni-icons>
					</view>
						<image  v-else :src="form.votePicture"  mode="widthFix"></image>
					
			
				</view>
				<view class="button">
					<view class="left" @click="cancel">
					取消
					</view>
					<view class="right" @click="submit">
						确定
				</view>
				</view>
				
			</view>
		</uni-popup>
		<uni-popup ref="popEmpower" type="bottom">
			<view class="empower">
				<view class="empower_header">
					<view>东之策隐私政策提示</view>
				</view>
				<view>
					<text>请你在使用东之策小程序前点击</text>
					<text>《隐私政策》</text>
					<text>并仔细阅读。如你同意</text>
					<text>《隐私政策》</text>
					<text>的全部内容，请点击“同意并继续”开始我们的服务</text>
				</view>
				<view class="empower_button">
					<button class="login_btn"  @tap="getUserProfile">
						<text>{{ $L('同意并继续') }}</text>
					</button>
					<button class="login_btn2" @click="closeFn()">
						<text>{{ $L('取消') }}</text>
					</button>
					<!-- <view @click="closeFn()">拒绝</view> -->
					<!-- <view>
						<button class="login_btn"  @tap="getUserProfile">
							<text>{{ $L('登录') }}</text>
						</button>
					</view> -->
				</view>
				
			</view>
		</uni-popup>
		<view class="" style="margin-bottom: 25%;">
			
		</view>
	</view>
</template>

<script>
	import uniCountdown from "../uni-countdown/components/uni-countdown/uni-countdown.vue"
	import uniForms from "../uni-forms/components/uni-forms/uni-forms.vue"
	 import uniFormsItem from "../uni-forms/components/uni-forms-item/uni-forms-item.vue"
	import {mapState,mapMutations} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniCountdown,
			uniForms,
			uniFormsItem
		},
		data() {
			return {
				
				duration: 500,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				activityinfo:{},
				tabid:1,
				form:{
					voteActivityId:'',
					participant:'',
					participantId:'',
					voteContent:'',
					votePicture:null,
					participantWork:'',//职务
				},
				list:[],
				client:null,
				wtCode: '',
				ec:{},
				cutdown:{},
				tanshow:1,
				videourl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a5c4cb7fda41a8b1aeb5b74475181d58.mp4',
				looknum:{},
				isover:1,//小于0结束投票
			};
		},
		onLoad(e) {
		this.ec=e
			this.form.voteActivityId=e.id
			this.getactivietyinfo(e)
			this.addnum()
			this.getlooknum()
			console.log('toupioa');
			 	this.client = this.$wxLoginClient()
				// #ifdef MP-WEIXIN
									 if(!this.hasLogin){
										this.getLogin()
										
									 }
				// #endif
		},
		 
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
					
		onShow() {
			// #ifdef MP-WEIXIN
								 if(!this.hasLogin){
									this.getLogin()
									
								 }
			// #endif
		},
		onShareAppMessage:function(){
			let imageurl='https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/toupiao.jpg'
			let pathinfo=`/standard/voteinfo/voteinfo?id=${this.form.voteActivityId}`
			 
			// let pathinfo='/extra/activityList/activityList'
			return{
				title:"安徽地坪协会年会地坪行业交流会最受欢迎分享嘉宾主题投票",
				path:pathinfo,
				imageUrl: imageurl,
			}
			
		},
		onShareTimeline: function() {
			let imageurl='https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/toupiao.jpg'
				let pathinfo=`/standard/voteinfo/voteinfo?id=${this.form.voteActivityId}`
			return {
				title: "安徽地坪协会年会地坪行业交流会最受欢迎分享嘉宾主题投票",
				path:pathinfo,
				imageUrl: imageurl,
			}
		},
		
		methods:{
					
			
			...mapMutations(['login', 'setUserCenterData', 'saveChatBaseInfo']),
				// 跳转微官网
				towebinfo(val){
					if(val.voteId==27){
						// 上海宜邦丽新材料有限公司
						uni.setStorageSync('storeId', '580006');
					   uni.navigateTo({
					   	 url:"/webcont/webindex/webindex"
					   			 })
					}else if(val.voteId==51){
						// 广州嘉宝莉地坪材料有限公司
					uni.setStorageSync('storeId', '580002');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==35){
						// 上海鲁工建
					uni.setStorageSync('storeId', '580007');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==58){
						// 阜阳格莱美标识标牌有限公司总经理
					uni.setStorageSync('storeId', '580004');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==32){
						// 戴凯勒化工（山东）有限公司营销总监
					uni.setStorageSync('storeId', '570004');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==50){
						// 浙江圣威装饰科技有限公司
					uni.setStorageSync('storeId', '570003');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==59){
						// 上海港奇建材有限公司业务经理
					uni.setStorageSync('storeId', '620004');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==29){
						// 上海港奇建材有限公司业务经理
					uni.setStorageSync('storeId', '580005');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}else if(val.voteId==36){
						// 上海港奇建材有限公司业务经理
					uni.setStorageSync('storeId', '580009');
					uni.navigateTo({
						 url:"/webcont/webindex/webindex"
							 })	
					}
				
				},
			closeFn(){
				let _this=this
				setTimeout(()=>{
					_this.$refs.popEmpower.close()
				},1000)
				              
			},
			addnum(){
				this.$request({
					url:'v3/activity/front/activity/view/add/count',
					method:'GET',
					data:{
						activityId:this.ec.id,
						viewsType:'2'
					}
				})
			},
			// 获取浏览量
			getlooknum(){
			  this.$request({
				  url:'v3/activity/front/activity/view/count',
				  method:'GET',
				  data:{activityId:this.ec.id}
			  }).then(res=>{
				  this.looknum=res.data
			  })	
			},
			//判断小程序分享进入详情是否登录
			getLogin(){
				console.log('是否授权登录1111');
				let _this=this
				setTimeout(()=>{
					_this.$refs.popEmpower.open()
				},1000)
				// wx.exitMiniProgram({
				// 	success: function() {
				// 		console.log('退出小程序成功');
				// 	},
				// 	fail: function(err) {
				// 		console.log('退出小程序失败', err);
				// 	}
				// }) .
			  
			},
			getUserProfile(e){
					let that = this
				uni.getUserProfile({
					desc: that.$L('用于完善个人信息'), // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						if (res.errMsg == 'getUserProfile:ok') {
							let userinfo = res.userInfo
							this.getWxXcxCoce(userinfo)
						}
					},
				})
			},
			//微信小程序根据用户信息获取code
			getWxXcxCoce(userinfo) {
				uni.showLoading({
					title: this.$L('正在请求...'),
					mask: true
				})
				uni.login({
					success: (code) => {
						this.toLogin(code.code, JSON.stringify(userinfo))
					}
				})
			},
			//登录 code为用户的code【微信小程序或者微信h5】  userInfo为获取到的微信用户信息
			toLogin(code, userInfo = '') {
				this.wtCode = code
			
				let {
					client
				} = this
				let _this = this
				let param = {}
				param.url = 'v3/member/front/login/wechat/login'
				param.data = {}
				param.data.source = client
				param.data.code = code
				// #ifdef APP-PLUS
				param.data.clientId = uni.getStorageSync('clientId');
				// #endif
			
				//如果有缓存的购物车数据，登录需要把数据同步，并清除本地缓存
				if (this.$getUnLoginCartParam()) {
				  param.data.cartInfo = this.$getUnLoginCartParam()
				}
				if (userInfo) {
					param.data.userInfo = userInfo
				}
				param.method = 'POST'
				this.$request(param)
					.then((res) => {
						console.log(res);
						_this.closeFn()
						if (res.state == 200) {
							uni.hideLoading()
							uni.setStorage({
								key: 'sld_login_time',
								data: new Date().getTime(),
							});
							
							if (res.data.redirect == undefined) {
								console.log('res.data.redirect');
								uni.removeStorage({
									key: 'cart_list'
								}) //清除购物车数据
								uni.setStorage({
									key: 'userInfo',
									data: res.data,
									success() {
										//登录时间
										res.data.loginTime = Date.parse(new Date())
										_this.login(res.data)
										//登录成功 获取个人中心的数据
										_this.$request({
												url: 'v3/member/front/member/memberInfo'
											})
											.then((result) => {
												console.log('result',result);
												_this.setUserCenterData(result.data)
												_this.initData()
												_this.getSetting()
												_this.$forceUpdate()
											})
									}
								})
							} else if (res.data.redirect != undefined) {
								//用户未注册，需要绑定手机号进行注册
								this.showState = true
								
								// #ifndef MP-WEIXIN
								this.$Router.push({
									path: '/pages/public/bindMobile',
									query: {
										code: res.data.bindKey
									}
								})
								// #endif
							
								// #ifdef MP-WEIXIN
								this.$refs.wxBindPhone.openKey(res.data.bindKey)
								// #endif
							}
						
					
						} else {
							uni.hideLoading()
							//错误提示
							_this.$api.msg(res.msg)
						}
					})
			},
			//获取个人中心数据
			initData() {
				let that = this
				if (this.userInfo.access_token) {
					this.$request({
							url: 'v3/member/front/member/getInfo'
						})
						.then((res) => {
							uni.stopPullDownRefresh()
							if (res.state == 200) {
								that
									.$request({
										url: 'v3/helpdesk/front/chat/unReadMsgNum'
									})
									.then((response) => {
										if (response.state == 200) {
											res.data.msgNum = response.data
											that.setUserCenterData(res.data)
										} else {
											that.setUserCenterData(res.data)
										}
									})
							} else {
								this.$api.msg(res.msg)
							}
						})
						.catch((e) => {})
			
					//获取订单订单未完成数量
					this.$request({
						url: 'v3/integral/front/integral/order/orderCount'
					}).then((res) => {
						if (res.state == 200) {
							this.pointOrderNums = res.data
						}
					})
			
					this.$request({
						url: 'v3/video/front/video/author/personPage'
					}).then((res) => {
						if (res.state == 200) {
							this.authorInfo = res.data
						}
					})
				} else {
					uni.stopPullDownRefresh()
				}
			},
			// 获取设置信息
			getSetting() {
				let param = {}
				param.url = 'v3/video/front/video/setting/getSettingList'
				param.method = 'GET'
				param.data = {}
				param.data.str = 'video_switch,live_switch'
				this.$request(param).then((res) => {
					if (res.state == 200) {
						let result = res.data
						result &&
							result.map((settingItem) => {
								if (settingItem.name == 'video_switch') {
									//绑定商品数
									// this.setting.video_switch = settingItem.value
								} else {
									// this.setting.live_switch = settingItem.value
								}
							})
					}
				})
			},
			// 获取活动详情
			getactivietyinfo(val){
				this.$request({
					url:'v3/activity/front/vote/list',
					method:"GET",
					data:{
						activityId:val.id,
						sort:this.tabid
					}
				}).then(res=>{
					this.activityinfo=res.data
					this.list=res.data.vo.list
					this.cutdown=this.gettimestage(new Date(),"2024-03-28 17:00:00")
					console.log(this.cutdown);
				})
			},
			// 筛选
			changetab(val){
				this.tabid=val
				this.tanshow=val
				this.getactivietyinfo(this.ec)
			},
			// 打开弹框
			open(){
				this.$refs.popup.open()
				
			},
			cancel(){
				this.$refs.popup.close()
			},
			votestarted(){
				uni.showToast({
					title:"投票已结束",
					icon:'none'
				})
			},
			// 投票
			votestart(val){
				this.$request({
					url:'v3/activity/front/vote/record/add',
					method:"POST",
					header:{
						'Content-Type': 'application/json'
					},
					data:{
						recordVoteId:val.voteId,
						recordActivityId:val.voteActivityId,
						participant:val.participant
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					
					this.getactivietyinfo(this.ec)
				})
			},
			// 删除
			delteitem(val){
				this.$request({
					url:'v3/activity/front/vote/delete/'+val.voteId,
					method:'GET'
				}).then(res=>{
					if(res.state==200){
						this.getactivietyinfo(this.ec)
					}
				})
			},
			submit(){
			if(this.form.participant.length!=0 && this.form.voteContent.length!=0 && this.form.votePicture){
				this.$request({
					url:'v3/activity/front/vote/add',
					method:"POST",
					header:{
						'Content-Type': 'application/json'
					},
					data:this.form
				}).then(res=>{
					this.$refs.popup.close()
					this.form={
					voteActivityId:this.ec.id,
					participant:'',
					participantId:'',
					voteContent:'',
					votePicture:null
				}
				this.getactivietyinfo(this.ec)
				})
			}else{
				uni.showToast({
					title:'请完善信息',
					icon:'none'
				})
			}	
			},
			gettimestage(start,end){
				let nowtime=new Date()
				let dayout=new Date(end)
				console.log(new Date(dayout).getTime(),nowtime.getTime());
				// 剩余时间
				 let daytime=new Date(dayout).getTime()-nowtime.getTime()
				 this.isover=daytime
				 console.log(daytime);
				 // d
				let day= daytime/(24*60*60*1000)<0?0: Math.floor((daytime/(24*60*60*1000)))
				// h
				let hour=(daytime-(day*24*60*60*1000))/(60*60*1000)<0?0:Math.floor((daytime-(day*24*60*60*1000))/(60*60*1000))
				// m
				let min=(daytime-((day*24+hour)*60*60*1000))/(60*1000)<0?0:Math.floor((daytime-((day*24+hour)*60*60*1000))/(60*1000))
				// s
				let scord=(daytime-((day*24*60+hour*60+min)*60*1000))/(1000)<0?0:Math.floor((daytime-((day*24*60+hour*60+min)*60*1000))/(1000))
							 
				return {day,hour,min,min,scord}
			},
		uploadCover() {
				let {
					cover
				} = this;
				let that = this;
				let key = uni.getStorageSync('token');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					//可选择原图或压缩后的图片
					sourceType: ['album', 'camera'],
					//可选择性开放访问相册、相机
					success: res => {
						uni.uploadFile({
							url: getApp().globalData.apiUrl + 'v3/oss/front/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'source': 'goods',
							},
			  header: {
			      Authorization:  'Bearer '+that.userInfo.access_token
			   },
							success: resup => {
								// #ifndef MP-ALIPAY||MP-BAIDU
								resup = JSON.parse(resup.data);
								// #endif
								// #ifdef MP-ALIPAY||MP-BAIDU
								resup = resup.data
								// #endif
			
								if (resup.state == 200) {
									that.form.votePicture=resup.data.url
								}
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
			width: 750rpx;
			margin: 0 auto;
			background: #F5F5F5;
			
		}
.warp{
	background: #F5F5F5;
	overflow: hidden;
	position: relative;
	.banner{
		background-color: #fff;
		.uni-margin-wrap {
				width: 690rpx;
				width: 100%;
			}
			.swiper {
				height: 300rpx;
			}
			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				.add{
					width: 100rpx;
					height: 100rpx;
					background-color: #fff;
				}
			}
			.swiper-list {
				margin-top: 40rpx;
				margin-bottom: 0;
			}
			.title_b{
				padding: 0 30rpx;
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: 550;
			}
			
	}
	.time{
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		// position: absolute;
		position: relative;
		.votenum{
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			.content{
				border-radius: 10rpx;
				padding: 10rpx;
				display: flex;
				align-items: center;
				background-color:rgba(0, 0, 0, 0.2);
				.num{
					margin-left: 10rpx;
					color: #fff;
				}
			}
		}
	}
	.tab_list{
		display: flex;
		
		background-color: #fff;
		padding: 10rpx 20rpx;
		margin-top: 10rpx;
		.t_item{
			margin-left: 10rpx;
			width: 50%;
			text-align: center;
		}
		.active{
			color: #ff841f;
			font-size: 30rpx;
		}
	}
	.list_value{
		.item_value{
			background-color: #fff;
			margin-top: 10rpx;
			padding: 10rpx;
			// height: 350rpx;
			display: flex;
			position: relative;
			// justify-content: space-between;
			.right_text{
				width: 440rpx;
				text-align: center;
				.r_top{
					
					font-size: 30rpx;
					font-weight: 550;
					margin-bottom: 10rpx;
				}
				.r_tops{
					font-size: 26rpx;
					font-weight: 550;
					margin-bottom: 10rpx;
				}
				.r_center{
					text-align: left;
				}
				.bottom{
					margin-top: 50rpx;
					width: 300rpx;
					text-align: center;
					.b_button{
						width: 300rpx;
						margin-top: 20rpx;
						background-color: #ff841f;
						color: #fff;
						padding: 10rpx 30rpx;
					}
					.b_buttons{
						width: 300rpx;
						margin-top: 20rpx;
						background-color: #cecece;
						color: #fff;
						padding: 10rpx 30rpx;
					}
				}
			}
			.delete{
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				color: #cecece;
			}
		}
	}
	.addbutton{
		position: fixed;
		right: 5rpx;
		top: 60%;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #ff841f;
		border-radius: 50%;
	}
	.form{
		background-color: #fff;
		width: 600rpx;
		padding: 10rpx;
		.image{
			padding: 10rpx 0;
			.addimages{
				width: 200rpx;
				padding: 0 60rpx;
				height: 160rpx;
				text-align: center;
				line-height: 160rpx;
				background-color: #F5F5F5;
			}
		}
		.button{
			width: 100%;
			height: 80rpx;
			border-top: 2rpx solid #cecece;
			display: flex;
			.left{
				width: 50%;
				height: 80rpx;
				border-right: 2rpx solid #cecece;
				text-align: center;
				line-height: 80rpx;
			}
			.right{
				width: 50%;
				text-align: center;
				line-height: 80rpx;
			}
			
		}
		
	}
	.empower{
			background-color: #ededed;
			padding: 20rpx;
			border-radius: 15rpx 15rpx 0 0;
		}
		.empower_header{
			padding:20rpx;
			width:100%;
			text-align: center;
			font-weight: 700;
			font-size: 30rpx;
		}
		.empower_button{
			margin-top: 10rpx;
			padding:20rpx 50rpx;
			
			// display: flex;
			// align-items: center;
			// justify-content: center;
			
		}
	.login_btn {
		background: #fc701e;
		color: #fff;
		border-radius: 50rpx;
		font-size: 24rpx;
		
	
		&::after {
			border: none;
		}
	
		text-align: center;
	}
	.login_btn2{
		color: #dadada;
		border-radius: 50rpx;
		font-size: 24rpx;
		margin-top: 15rpx;
		
			
		&::after {
			border: none;
		}
			
		text-align: center;
	}
}
</style>
